<template>
  <div>  
  	<!--
      	面包屑导航
      -->
  	<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
   </el-breadcrumb>
    <!--卡片-->
    <el-card>    
     <el-row :gutter="20">
      <el-col :span="7">
      	<el-input  v-model="queryinfo.query" clearable @clear="getUserList">
      	
             <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
         </el-input>
      
      </el-col>
      <el-col :span="6"><el-button type="primary" @click="addDialogVisible=true">添加用户</el-button></el-col>
      
      <!--表格-->
      <el-table :data="userlist" border>
      	<el-table-column type="index" label="#"></el-table-column>
      	<el-table-column label="姓名" prop="username"></el-table-column>
      	 <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
        	<template slot-scope="scope">
        		<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
            </el-switch>
        	</template>
        </el-table-column>
         <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      
      
       <el-pagination  @current-change="handleCurrentChange" 
       	:current-page="queryinfo.pagenum" :page-size="queryinfo.pagesize"
       	 layout="prev, pager, next" :total="total">
       </el-pagination>
        
   </el-row>
    </el-card>
    
    <!--新增用户对话框-->
    <el-dialog
  title="提示"
  :visible.sync="addDialogVisible"
  width="50%"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
 
</el-breadcrumb>
  </div>	
	
</template>

<script>
 export default{
 	data(){
 		return{ 			
 			queryinfo:{
 				query:'',
 				pagenum:1,
 				pagesize:2
 			},
 			info:{id:'1003'},
 			userlist:[],
 			total:0,
 			addDialogVisible:false
 		}
 		
 		},
 	created(){
 		//this.getUserList()
 	},
 	methods:{
 		async getUserList(){
 			const {data:res}=await this.$http.get('users',{params:this.queryinfo});
 			if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
 			this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
 			
 		},
 		 // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryinfo.pagenum = newPage
      this.getUserList()
    },
 		//搜索
 		async search(){
 			//this.getUserList() 	
 			
 			//const {data:res}=await this.$http.post('course/findById',JSON.stringify(this.info)); 
 				const {data:res}=await this.$http.post('course/findById',{id:'1003'}); 			
      console.log(res)
 			
 		}
 	}
 	
 	
 	}
 	
 
</script>

<style scoped></style>